<template>
<!-- 找房 -->
<div>
    <Navbar bgccolor='#21b97a'>
      <template>
        <van-icon name="arrow-left" size='0.7rem' @click="Jump" color='#fff' />
        </template>
    </Navbar>
<van-dropdown-menu>

  <van-dropdown-item  title='区域' ref="item" >
      <van-picker  :columns="columns" confirm-button-text value-key='label' @change='addfn' />
      <div class='picker'>
      <van-button type="primary" size="large" @click='$refs.item.toggle()'>取消</van-button>
      <van-button type="primary" size="large">确认</van-button>
      </div>

  </van-dropdown-item >
  <!-- <van-dropdown-item v-model="value2" :options="option2" />
  <van-dropdown-item v-model="value3" :options="option3" />
  <van-dropdown-item v-model="value4" :options="option4" /> -->
</van-dropdown-menu>
  <Rent />
  </div>
</template>

<script>
import { AreCty } from '@/api'
import Rent from '@/views/components'
import Navbar from '@/views/Navbar'
export default {

  components: { Navbar, Rent },
  methods: {
    Jump () {
      this.$router.push({
        path: '/layout/home'
      })
    },
    // 三个参数 第一个picker实例 第二个 值 第三个 索引
    addfn (picker, value, index) {
      this.columns[0].children.forEach(item => {
        if (item.label === value[2] || item.label === value[1]) {
          value = item.label
        }
      })
      console.log(value)
    }
  },

  async created () {
    const res = await AreCty({ id: 'AREA|88cff55c-aaa4-e2e0' })

    res.data.body.area.children.forEach(item => {
      if (!item.children) {
        item.children = [{ label: '' }]
      }
    })
    this.columns[0].children = res.data.body.area.children
    this.columns[1].children = res.data.body.subway.children
    console.log(this.columns[0].children)
  },
  data () {
    return {
      columns: [
        {
          label: '区域',
          children: []
        },
        {
          label: '地铁',
          children: []
        }
      ],
      propstim: []
    }
  }
}
</script>

<style lang='less' scoped>
.picker{
  display: flex;
  .van-button--primary:first-child{
    background-color: #fff;
    color: #21b97a;
  }
}
</style>
